<template>
  <div class="title-view">
    <div>
      <div class="name">{{landInfo?.farmLandName}}</div>
        <div class="cropname">稻谷{{landInfo?.cropName}},{{landInfo?.cropSeriesName}}</div>
    </div>
    <div class="right-text">
      <div class="num">{{landInfo?.mapAreaSize}}亩</div>
      <div class="count">共计作业<span>6</span>次</div>
    </div>
  </div>
  <Steps direction="vertical" :active="0">
      <Step>
        <div class="">作业时间:2024-07-12 星期三</div>
        <div class="step-view">
            <div class="image-view">
              <Image
                fit="cover"
                width="100%"
                height="100%"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              />
            </div>
            <div class="step-view-right">
              <div class="line-view">
                <div>长势状态</div>
                <div style="color: #07c160;">壮</div>
              </div>
              <div class="line-view">
                <div>生育时期</div>
                <div>出苗</div>
              </div>
              <div class="line-view">
                <div>记录人</div>
                <div>王丽丽</div>
              </div>
            </div>
        </div>
      </Step>
    </Steps>
    <Button  
       style="margin:10px;"
      icon="more-o"
      size="small"
      type="success"> 更多</Button>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import {getLandDetail} from '@/api/gis'
import { Button,Steps,Step,Image} from 'vant';

const emits = defineEmits(['onClick','onCancel'])
const props = defineProps({ 
  farmLandId:{
    type:String,
    default(){
      return ''
    }
  }
})
const landInfo:any=ref({})
onMounted(async ()=>{
  getLandInfo()
})
const getLandInfo =()=>{
  getLandDetail({farmLandId:props.farmLandId}).then((res:any)=>{
      if(res.success){
        landInfo.value = res.data
      }
    })
}
const btnOpen = async (type:any) => {
  emits('onClick',type)
};
defineExpose({getLandInfo})

</script>

<style lang="scss" scoped>
.title-view{
  display: flex;
  justify-content:space-between;
  padding:10px 14px 0 14px;

  .name,.num{
    color: #565656;
    font-size:16px;
  }
  .right-text{
    font-size:14px;
    text-align: right;
    .count{
      font-size:14px;
      color: #333;
      span{
        font-size:15px;
        color: #07c160;
      }
    }
  }
  .cropname{
    font-size:14px;
    color: #ff9c00;
  }
}
.step-view{
  display: flex;
  padding-top:10px;
  .image-view{
    height:80px;
    width:80px;
  }
  .step-view-right{
    width:240px;
    padding-left:10px;
    .line-view{
      display: flex;
      justify-content: space-between;
      color:#333;
      font-size:14px;
      padding-bottom:6px;
    }
  }
}
</style>